<script setup>
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { useWorkerStore } from '@/stores/woker'
import { ref, reactive } from 'vue'
const userStore = useUserStore()
const workerStore = useWorkerStore()
const router = useRouter()
const change = (command) => {
  if (command === 'logout') {
    ElMessageBox.confirm('确认退出登录吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      userStore.logout()
      router.push('/login')
    })
    return
  }
  router.push(command)
}

const fd = ref({
  name: '',
  age: '',
  gender: '1'
})
const centerDialogVisible = ref(false)
const reset = () => {
  fd.value = {
    name: '',
    age: '',
    gender: '1'
  }
  centerDialogVisible.value = false
}

const form = ref()
const rules = reactive({
  name: [
    {
      validator: (rule, value, callback) => {
        if (value === '') {
          return callback(new Error('姓名不能为空'))
        }
        callback()
      },
      trigger: 'blur'
    }
  ],
  age: [
    {
      validator: (rule, value, callback) => {
        if (value === '') {
          return callback(new Error('年龄不能为空'))
        } else if (/^[1-9]*\d{1}$/.test(value)) callback()
        else callback(new Error('年龄只能在1-99岁之间'))
      },
      trigger: 'blur'
    }
  ],
  gender: [
    {
      validator: (rule, value, callback) => {
        if (value === '') {
          callback(new Error('性别不能为空'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
})
const submit = async () => {
  await form.value.validate()
  fd.value.created_at = new Date().toLocaleString()
  fd.value.updated_at = new Date().toLocaleString()
  workerStore.addWorker(fd.value)
  fd.value = {
    name: '',
    age: '',
    gender: '1'
  }
  centerDialogVisible.value = false
}
</script>

<template>
  <div class="header">
    <div class="logo" style="cursor: pointer;" @click="$router.push('/admin')">
      <img src="@/assets/img/logo.png" draggable="false" width="100" alt="" />
      <span>后台管理系统</span>
    </div>
    <div class="user">
      <div v-if="$route.path == '/admin'" style="margin-right: 30px; cursor: pointer"
        @click="centerDialogVisible = true">
        <el-icon size="40" circle>
          <Plus />
        </el-icon>
      </div>
      <el-dropdown @command="change">
        <img :src="userStore.userInfo.avatar" width="50" height="50" v-if="userStore.userInfo.avatar" alt="">
        <el-icon size="50" v-else color="white">
          <Avatar />
        </el-icon>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>尊敬的
              <b>{{
      userStore.userInfo?.nickname ?? ''
    }}</b>
              用户</el-dropdown-item>
            <el-dropdown-item divided command="/update">修改资料</el-dropdown-item>
            <el-dropdown-item command="/reset">修改密码</el-dropdown-item>
            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <el-dialog v-model="centerDialogVisible" title="添加人员名单" width="500" align-center>
      <el-form ref="form" :rules="rules" label-width="auto" :model="fd" style="max-width: 600px">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="fd.name" />
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="fd.age" />
        </el-form-item>
        <el-form-item label="性别 " prop="gender">
          <el-select v-model="fd.gender" placeholder="" size="large" style="width: 240px">
            <el-option v-for="item in [
      { value: '1', label: '男' },
      { value: '0', label: '女' }
    ]" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="reset">取消</el-button>
          <el-button type="primary" @click="submit"> 添加 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgb(52, 14, 53);
  width: 100%;
  color: white;
  height: 100%;
}

.user {
  margin-right: 20px;
  display: flex;
  align-items: center;
}

.logo {
  margin-left: 20px;
  display: flex;
  align-items: center;
  font-size: 24px;
}
</style>
